// React生命周期有哪些，16版本生命周期发生了哪些变化？
/*
  16 之前
    初始化阶段： constructor, getDefaultProps, getInitialState,
    挂载阶段： componentWillMount, render, componentDidMount
    更新阶段： componentWillReceiveProps, shouldComponentUpdate, componentWillUpdate
    render, componentDidUpdate,
    卸载阶段： componentWillUnmount

  16之后：
    初始化阶段： constructor, getDefaultProps, getInitialState,
    挂载阶段： static getDerivedStateFromProps(nextProps, prevState), render, componentDidMount
    // NOTE: getDerivedStateFromProps 这个函数会在每次接收到新的 props 或者是 state 时，都会调用，
    放回一个 state 对象， 如果返回 null 则不会调用
    // NOTE: 根据nextProps和prevState计算出预期的状态改变，返回结果会被送给setState

    更新阶段： getDerivedStateFromProps, shouldComponentUpdate, render, getSnapshotBeforeUpdate(prevProps,prevState) ,componentDidUpdate(prevProps, prevState, snapshot),
    // NOTE: getSnapshotBeforeUpdate 触发在 update 的阶段，在 render 之后，
    在组件渲染之前，返回一个值，作为 componentDidUpdate 第三个参数， 这个函数会在render 之后， 但是这个时候 DOM 还没有更新， 给一个机会去计算 DOM 的信息，得到一个 snapshot

    卸载阶段： componentWillUnmount，
    错误处理： componentDidCatch

    // NOTE: react 在 16.4 之后启动了 fiber ，开启了 async render，
    这个使得 render 之前的生命周期函数会被多次的调用， 那么就废掉了之前多个声明周期函数，

    // NOTE: 这些修改只是希望在我们在 render 之前不要做一些奇怪的事情； 希望要做的事情是根据 props 和 state 来决定的新的 state； 这样给开发者设置了很多的约束， 避免乱来
  */

// setState是同步的还是异步的？

// NOTE: - 生命周期和合成事件中: 这个时候 React 还在处于 update 的机制中， 这个时候调用 setState ，不会触发更新， 会将这个更新的操作压入 pendingQueue， 将要更新的组件放到 dirtyComponent；
// 当上一次更新完毕之后， 才会在相应的 dirtyComponent 中取出要更新的组件， 和 pendingStateQueue 中取出 state 来更新 state,
// 那么我们 setState 之后，立即获取 state 是无法获取的到的； 因为这个React 处于批处理机制中， state 会被暂时存起来； 等批处理完成之后，再取出 state 进行更新；
// setState 本身不是异步的； 但是 React 这样的更新机制，造成了 setState 的一种异步的假象；
// 在原生事件(setTimeout, Event, IO)中调用 setState 并不会出发 React的批处理机制，所以立即能拿到最新结果。

// 为什么有时连续多次 setState只有一次生效？

// NOTE: React 的 批处理机制会将多个 setState 进行合并； 会使用到 _assign 函数进行合并， 如果不想这样合并； 那么可以将 setState 传入一个函数，函数参数可拿到上一次合并过的 preState

// React如何实现自己的事件机制？
// NOTE: React 事件并没有将事件直接绑定在 DOM 上； 而是将事件绑定在 document 上进行的分发；
// EventPluginHub负责管理 React合成事件的 callback，它将 callback存储在 listenerBank中，另外还存储了负责合成事件的 Plugin
// dispatchEvent绑定在 document 原生事件之前来分发事件 其中维护一个 eventQueue， 来处理事件冒泡和事件处理,
// 通过 dispatchEvent 循环调用来模拟冒泡和捕获

// 为何 React事件要自己绑定 this？
// NOTE: 当具体到某一事件处理函数将要调用时，将调用 invokeGuardedCallback方法。 由于事件处理函数是直接调用的；所有必须要 bind this

// 原生事件和 React事件的区别？
// NOTE:  命名方式， 传递函数，不能通过 return false 来阻止默认事件

// React的合成事件是什么？
// NOTE: React 根据规范定义了每个事件的处理函数的参数，即为合成事件， React 在内部将原生事件进行了包装，
// 具有与浏览器原生事件一致的，形同的接口，SyntheticEvent 事件对象池， 这样避免了频繁的创建事件, 同时将包装这一层，也兼容了浏览器的差异

// React和原生事件的执行顺序是什么？可以混用吗？
// NOTE: React 的事件通过 document 事件代理进行分发， 原生的 DOM 通过冒泡到 document 之后进行才能进行处理，如果混合使用了原生事件并且阻止了冒泡， 那么会导致 React 的事件分发失去作用；

// 虚拟Dom是什么？
// NOTE: 虚拟 Dom 的优势是 diff 算法和批量处理的优势， 如果我们自己每次都能计算出那些是需要渲染的，那些是重复渲染的；
// 这样我们也不需要虚拟dom ；但是我们做这一层可能没有 React 做的好， 那么我就依赖 React 的虚拟 Dom 来提交效率

// 虚拟Dom比 普通Dom更快吗？
// NOTE: 并不会快；如果是首次的渲染； 虚拟 Dom 并不会有优势，还会有大量的计算， 但是虚拟 Dom 可以优化重复的渲染

// 虚拟Dom中的 $$typeof(Symbol) 属性的作用是什么？
// NOTE: ReactElement 中会有 $$typeof 这个属性， => React_element_type; 同时 React 会将没有 这个属性的组件和规则校验不通过的过滤掉；

// React组件的渲染流程是什么？
// NOTE:

// 为什么代码中一定要引入 React？
// NOTE: Babel 将 jsx 转换为 React.createElement() 所有需要 React 依赖

// 为什么 React组件首字母必须大写？
// NOTE: babel 在编译的时候， 首字母大写的是组件， 小写是原生 dom

// React在渲染 真实Dom时做了哪些性能优化？
// NOTE: 在 IE(8-11) 一个一个的插入节点的性能要远高于插入一段 dom， 在其他的浏览器上却是使用文档片段

// 什么是高阶组件？如何实现？
// NOTE: HOC 其实是一个函数，接收一个组件作为参数，并且将其包装再放回出去

// HOC在业务场景中有哪些实际应用场景？
// NOTE: 双向绑定，日志打点， 权限控制， 表单校验

// 高阶组件( HOC)和 Mixin的异同点是什么？
// NOTE: 都是来解决代码服用的问题 mixin 可能会有相互依赖, HOC 像是一种装饰

// Hook有哪些优势？
// 处理函数组件时根据的灵活
